<template>
  <div class="tips tac">
    <div class="tips-title tac">温馨提示</div>
    <div class="tips-text flex tal" v-for="tip in tipsList"><span class="flex-1">{{tip | filterTip(config)}}</span>
    </div>
    <img class="qrcode vam" src="../images/qrcode_for_gh_63f3ee3543f3_258.jpg"/>
    <div class="tips-img-text">长按二维码保存图片到手机</div>
    <div class="tips-btn mlr-auto" @click="copyWxNumber">点我复制微信号</div>
  </div>
</template>

<script>
  export default {
    name: 'DetailTip',
    filters: {
      filterTip(tip, config) {
        return tip.replace(/{{\w+}}/g, str => config[str.slice(2, -2)] || str);
      }
    },
    props: {
      tipsList: {
        type: Array,
        default() {
          return [];
        }
      },
      config: {
        type: Object,
        default() {
          return {
            phone: '18925187565'
          };
        }
      }
    },
    data() {
      return {};
    },
    watch: {},
    mounted() {
    },
    methods: {
      copyWxNumber() {
        this.util.copyText(this.config.phone) ? this.$toast.success('复制成功') : this.$toast.fail('复制失败');
      }
    }
  };
</script>

<style scoped lang="less">
  .tips {
    counter-reset: index;
    padding: .94rem 1.03rem;
    background-color: #faf4ed;
    border-radius: 0.63rem;
    &-title {
      margin-bottom: .94rem;
      color: #666;
      font-size: 1rem;
      line-height: 1rem;
    }
    &-text {
      counter-increment: index;
      color: #948f8a;
      font-size: .75rem;
      line-height: 1.25rem;
      &:before {
        content: counter(index);
        display: inline-block;
        margin-right: .78rem;
        width: 1.25rem;
        height: 1.25rem;
        text-align: center;
        border-radius: 1.25rem;
        color: #fff;
        font-weight: bold;
        font-style: italic;
        background-color: #e0be97;
      }
    }
    .qrcode {
      margin: .62rem 0 .65rem;
      width: 5.63rem;
      height: 5.63rem;
      border-radius: .13rem;
      border: .13rem solid rgba(224, 190, 151, .6);
    }
    &-img-text {
      margin-bottom: 1rem;
      color: #948f8a;
      font-size: .66rem;
    }
    &-btn {
      width: 12.47rem;
      line-height: 1.88rem;
      background-color: #ede4d9;
      border-radius: 1.88rem;
      color: #948f8a;
      font-size: .75rem;
    }
  }
</style>
